import { Carousel } from 'antd';
import { chunk } from 'lodash';
import moment from 'moment';
import type { MsgObj } from '../types.d';
import cpnstyles from './cpnstyles.less';
// realtimemsg

const RealTimeMsg = (props: { msgs: MsgObj[] }) => {
  const { msgs } = props;
  const handledMsg = chunk(msgs, 3);
  return (
    <div className={cpnstyles.realtimeWrap}>
      <svg width="996" height="221">
        <filter id="inset-shadow">
          <feComponentTransfer in="SourceAlpha">
            <feFuncA type="table" tableValues="1 0" />
          </feComponentTransfer>
          <feGaussianBlur stdDeviation="10" />
          <feOffset dx="0" dy="1" result="offsetblur" />
          <feFlood floodColor="#164280" result="color" />
          <feComposite in2="offsetblur" operator="in" />
          <feComposite in2="SourceAlpha" operator="in" />
          <feMerge>
            <feMergeNode in="SourceGraphic" />
            <feMergeNode />
          </feMerge>
        </filter>
        <polygon
          points="79,43 91,14 113,0 136,0 137,1 113,1 92,14 81,41"
          stroke="#00fffd"
          fill="transparent"
          style={{ stroke: '#00fffd', fill: '#00fffd', strokeWidth: 1 }}
        />
        <polygon
          points="859,2 860,1 884,1 915,23 928,50 928,52 915,22 884,2"
          stroke="#00fffd"
          fill="transparent"
          style={{ stroke: '#00fffd', fill: '#00fffd', strokeWidth: 1 }}
        />
        <polyline
          points="26,150 1,205 10,220 182,220 192,211"
          stroke="#004789"
          fill="transparent"
          strokeWidth="1"
        />
        <polygon
          points="113,6 880,6 906,24 925,66 939,75 990,180 983,191 988,200 982,211 20,211 14,200 32,160 26,150 75,50 88,41 99,16"
          style={{
            stroke: '#00cff1',
            strokeWidth: 1,
            fill: '#001f34',
            filter: 'url(#inset-shadow)',
          }}
        />
        <polygon
          points="990,193 990,190 996,202 987,217 770,217 768,216 986,216 994,202"
          stroke="#00fffd"
          fill="transparent"
          style={{ stroke: '#00fffd', fill: '#00fffd', strokeWidth: 1 }}
        />
      </svg>
      <div className={cpnstyles.realtimemsg}>
        <h3 className={cpnstyles.header}>
          <i className={cpnstyles.rightArrow} />
          实时信息
        </h3>
        <div className={cpnstyles.msgBox}>
          {msgs.length > 0 ? (
            <Carousel
              style={{ height: '100%' }}
              dotPosition="left"
              dots={false}
              autoplay
              effect="fade"
            >
              {handledMsg.map((ulArr) => (
                <div key={JSON.stringify(ulArr)}>
                  {ulArr.map((item) => (
                    <div key={JSON.stringify(item)} className={cpnstyles.msgItem}>
                      {moment(item.time).format('YYYY年MM月DD日 HH:mm:ss')}
                      <span className={cpnstyles.lot}>{item.parkingLotName}</span>「{item.spotId}」
                      <span className={cpnstyles.plate}>{item.plateNumber}</span>
                      {item.type === 'in' ? '驶入' : '驶出'}
                    </div>
                  ))}
                </div>
              ))}
            </Carousel>
          ) : (
            <div className={cpnstyles.emptyBox}>暂无实时信息</div>
          )}
        </div>
      </div>
    </div>
  );
};

export default RealTimeMsg;
